<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>10.animation-timing-function</title>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <link rel="stylesheet" href="../../styles/normalize.css" />
    <style type="text/css">
      .box {
        background-color: rebeccapurple;
        border-radius: 10px;
        width: 0;
        height: 100px;
        margin-bottom: 10px;
      }
      /**
        ease: 即默认值，表示动画在中间加速，在结束时减速。
        linear: 匀速运动
        ease-in
        ease-out
        ease-in-out
        cubic-bezier(p1, p2, p3, p4)
      */
      .box.start-move {
        animation-name: move-right;
        animation-duration: 20s;
        animation-direction: alternate;
        animation-iteration-count: 1;
      }
      /*
        5个跳跃
        动画是否在 0%、20%、40%、60% 和 80% 处暂停
        动画是否在 20%、40%、60%、80% 和 100% 处暂停
        或者在动画的 0% 和 100% 之间设置 5 个定格，
        又或是在包括 0% 和 100% 的情况下设置 5 个定格（在 0%、25%、50%、75% 和 100% 处
      */
      .box.jump-start-five {
        animation-timing-function: steps(5, jump-start);
      }
      .box.jump-end-five {
        animation-timing-function: steps(5, jump-end);
      }
      .box.jump-none-five {
        animation-timing-function: steps(5, jump-none);
      }
      .box.jump-both-five {
        animation-timing-function: steps(5, jump-both);
      }
      .box.start-five {
        animation-timing-function: steps(5, start);
      }
      .box.end-five {
        animation-timing-function: steps(5, end);
      }
      .box.step-start-five {
        animation-timing-function: step-start;
      }
      .box.step-end-five {
        animation-timing-function: step-end;
      }
      .box.pause-move {
        animation-play-state: paused;
      }
      @keyframes rotate {
        0% {
          transform: rotate(0);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      @keyframes move-right {
        0% {
          width: 100px;
        }
        100% {
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <button id="btn">start move</button>
    <button id="btn2">pause move</button>
    <script>
      $(document).ready(function () {
        const boxEle = $(".box");
        const obj = {
          1: "jump-start",
          2: "jump-end",
          3: "jump-none",
          4: "jump-both",
          5: "start",
          6: "end",
          7: "step-start",
          8: "step-end",
        };
        $("#btn").on("click", function () {
          boxEle.each((index) => {
            const box = boxEle[index];
            $(box).removeClass("pause-move");
            $(box).addClass(`start-move ${obj[index + 1]}-five`);
          });
          // $(boxEle).on("animationstart", function () {
          //   console.log("animationstart");
          // });
          // $(boxEle).on("animationend", function () {
          //   console.log("animationend");
          // });
        });

        $("#btn2").on("click", function () {
          $(boxEle).addClass("pause-move");
        });
      });
    </script>
  </body>
</html>
